<template>
  <div class="page_vue">
    <!-- 标题 -->
    <navigation-title> </navigation-title>
    <div class="page_body">
      <div class="team-hight-set-title">{{ $t('teamDoc.hightSet.delSpace') }}</div>
      <div class="sub_title">{{ $t('teamDoc.hightSet.tip1') }}</div>
      <div>
        <el-button type="danger" @click="deleteTeamClick">{{ $t('teamDoc.hightSet.delSpace') }}</el-button>
      </div>
    </div>
    <div class="page_body">
      <div class="team-hight-set-title">{{ $t('teamDoc.hightSet.changeAdmin') }}</div>
      <div class="sub_title">{{ $t('teamDoc.hightSet.tip2') }}</div>
      <div>
        <el-tag style="margin-right: 20px;">{{ teamInfo.ownerName }}</el-tag>
        <el-button type="primary" @click="openDialogTransferClick()">{{ $t('teamDoc.hightSet.changeAdmin')
          }}</el-button>
      </div>
    </div>
    <div>
      <yu-dept-member ref="yuDeptAdmin" :onlyOne="true"
        @sureDialogTransferClick="sureDialogAdminTransferClick"></yu-dept-member>
    </div>
  </div>
</template>


<script lang="ts" setup>
import navigationTitle from '../components/newUiModule/navigation-title.vue'
import { apiTeamGetInformation, apiTeamdDelete, apiTeamOwnerHandOver } from '@/api/teamKnowdge/teamDocApi'
import useUserStore from '@/store/modules/user'
import yuDeptMember from "@/views/components/select-user-check/select-user.vue"


const route = useRoute()
const router = useRouter()
const userStore = useUserStore()
const teamId = ref('')
const teamInfo = ref<{ owner: string; ownerName: string }>({ owner: '', ownerName: '' })
const formRefs = ref(null)
const yuDeptAdmin = ref(null)
const visibleDialog = ref(false)
const form = ref({
  nickName: "",
  userId: "",
})

onMounted(() => {
  teamId.value = route.query.teamId as string
  getTeamInfo()
})

const getTeamInfo = async () => {
  const res = await apiTeamGetInformation({
    id: teamId.value
  })
  if (res.code == 200) {
    teamInfo.value = res.data
  }
}
const deleteTeamClick = async () => {
  if (teamInfo.value.owner != userStore.userId) {
    ElMessage.error('你没有权限，请联系管理员！')
    return
  }
  ElMessageBox.confirm('此操作将永久删除该团队, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: "取消",
    type: "warning",
  }).then(res => {
    apiTeamdDelete({
      ids: teamId.value
    }).then(res => {
      ElMessage.success('删除成功！')
      router.push('/newUi/teamKnowdge/teamDoc')
    }
    )

  })
}
const sureDialogAdminTransferClick = (data: any) => {
  apiTeamOwnerHandOver({
    id: teamId.value,
    owner: data[0].userId
  }).then(res => {
    if (res.code == 200) {
      ElMessage.success('更新成功！')
      router.push('/newUi/teamKnowdge/teamDoc')
      visibleDialogClose()
    }
  })
}

const visibleDialogClose = () => {
  visibleDialog.value = false
  formRefs.value.resetFields()
  form.value = {
    nickName: "",
    userId: "",
  }
}
const openDialogTransferClick = () => {
  if (teamInfo.value.owner != userStore.userId) {
    ElMessage.error('你没有权限，请联系管理员！')
    return
  }
  console.log(teamInfo.value, '123')
  let user = [
    { userId: Number(teamInfo.value.owner), nickName: teamInfo.value.ownerName }
  ]
  yuDeptAdmin.value.openDialogTransfer(user)
}

</script>




<style scoped lang='scss'>
.page_vue {
  .page_body {
    padding: 20px;

    .team-hight-set-title {
      color: #3d3d3d;
      font-size: 15px;
      margin-bottom: 15px;
      font-weight: bold;
    }

    .sub_title {
      color: #999;
      font-size: 15px;
      margin-bottom: 15px;

    }
  }
}
</style>